<template>
    <div class="app">
        <div class="nav">
            <Navi />
        </div>
        <div style="width: 98%;margin: 0 auto;margin-top: 20px;margin-bottom: 20px;">
            <span style="color:#70b6fe;font-size: 30px;font-weight: 900;">
                岗位数据展示
            </span>
        </div>
        <div class="table">
            <el-table 
            :data="Store.tableData" 
            stripe 
            style="width: 100%;"
            :cell-style="{textAlign: 'center'}"
            :header-cell-style="{ height: '100px', fontSize: '24px',color:'black',Text:'center','text-align':'center'}"
            height="900px" border
            @row-click="toInfo"
            >
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="price" label="薪资" />
                <el-table-column prop="ltd" label="公司" />
                <el-table-column prop="experience" label="经验" />
                <el-table-column prop="infoid" v-if="false" label="id" />

            </el-table>
            <div style="margin-top: 20px;margin-bottom: 20px;width: 60%;margin: 0 auto;">
                <el-pagination  
                background 
                layout="prev, pager, next,jumper" 
                @current-change="handle"
                :total="Store.count * 10" />
            </div>
        </div>
        <div>
            <BotNav />
        </div>
    </div>
</template>

<script setup>
import Navi from '@/components/Navict.vue'
import BotNav from '@/components/BottomNavict.vue'
import axios from 'axios'
import { onMounted } from 'vue'
import { useCounterStore } from "../stores/counter"
import { useRouter } from 'vue-router'; 

const Store = useCounterStore()
const router = useRouter();

function toInfo(row, event, column) {
    router.push({path:'/infos',query:{id:row.infoid}})
}

const handle = (page = 1) => {
    getall(page)
}

function getall(currentpage=1) {
    axios({
        method: "get",
        params:{
            number:20,
            currentpage:currentpage
        },
        url: "http://localhost:8080/jobs/all",
    }).then(res=>{
        if(res.data.code === 200){
            Store.get_jobs(res.data.reslut)
            Store.increment(parseInt(res.data.totalpage))
        }
    })
}

onMounted(getall)

</script>

<style scoped>
    .app{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left:0;
    }
    .nav{
        height: auto;
    }
    .table{
        height: auto;
        width: 98%;
        margin: 0 auto;
    }
    .el-pagination {
        justify-content: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }
</style>
